<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>捐款系统</title>
    <link rel="stylesheet" href="./css/dist/index.css">
</head>

<body>
    <h1>捐赠管理</h1>
    <div id="main">
        <!-- 搜索栏组件 -->
        <search-box :options="districts" @prev="prev" @next="next" :current="currentPage" :total="totalPage" @search="changeDist">
            <template v-slot:search-info>受捐地区：</template>
        </search-box>
        <!-- 添加捐款信息组件 -->
        <add-box :options="districts" @addlist="add">
            <template v-slot:donater>捐款人：</template>
            <template v-slot:donated>受捐地区：</template>
            <template v-slot:donate-money>金额：</template>
            <template v-slot:donate-date>日期：</template>
            <template v-slot:btn-add>新增</template>
        </add-box>

        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>捐赠人</th>
                    <th>受捐地区</th>
                    <th>金额</th>
                    <th>受捐日期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in displayList" :key="item.id" v-show="inShow(index+1)">
                    <td>{{index+1}}</td>
                    <!-- 捐款人 -->
                    <td v-show="displayState!==index+1">{{item.donater}}</td>
                    <!-- 修改捐款人 -->
                    <td v-show="displayState===index+1">
                        <input type="text" class="modiInput" v-model="tempData.donater">
                    </td>
                    <!-- 受捐地区 -->
                    <td v-show="displayState!==index+1">{{item.dist.name}}</td>
                    <!-- 修改受捐地区 -->
                    <td v-show="displayState===index+1">
                        <select-box class="modiInput" :options="districts" :add="0" :value="tempData.dist.value" @change="selChange"></select-box>
                    </td>
                    <!-- 捐款金额 -->
                    <td v-show="displayState!==index+1">{{item.money}}</td>
                    <!-- 修改捐款金额 -->
                    <td v-show="displayState===index+1">
                        <input type="number" class="modiInput" v-model="tempData.money">
                    </td>
                    <!-- 捐款日期 -->
                    <td v-show="displayState!==index+1">{{item.date}}</td>
                    <!-- 修改捐款日期 -->
                    <td v-show="displayState===index+1">
                        <input type="date" class="modiInput" v-model="tempData.date">
                    </td>
                    <!-- 操作栏 -->
                    <td class="oper">
                        <a @click="modifyData(index)" class="modi" href="javascript:;" v-show="displayState!==index+1">修改</a>
                        <a @click="delData(item.id)" class="del" href="javascript:;" v-show="displayState!==index+1">删除</a>
                        <a @click="confirm(index)" class="sure" href="javascript:;" v-show="displayState===index+1">确定</a>
                        <a @click="cancel(index)" class="cancel" href="javascript:;" v-show="displayState===index+1">取消</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script src="./js/lib/vue.js"></script>
<script src="./js/localStorage.js"></script>
<script src="./js/components/selectBox.js"></script>
<script src="./js/components/pageBox.js"></script>
<script src="./js/components/searchBox.js"></script>
<script src="./js/components/addBox.js"></script>
<script src="./js/index.js"></script>

</html>